<template>
<div class="CMSPhotosItem">
  <y-upload-img
    :url="myUrl"
    value-type="ObjectArray"
    @update="updateModel"
    :cropper-options="{
      fixed: false
    }"
    re-upload
    business-sys-module-code="CMS_PHOTO"
    :limit="1">
  </y-upload-img>
  <el-popover
    v-model="showPopover">
    <div class="cms-link-dialog">
      <el-select
        v-model="isOuterInner"
        style="width: 110px"
        placeholder="内链/外链"
        @change="linkValue = ''">
        <el-option value="0" label="内链"></el-option>
        <el-option value="1" label="外链" disabled></el-option>
      </el-select>
      <el-input
        v-model="linkValue"
        v-if="isOuterInner === '1'"
        style="width: 220px"
        type="textarea" :autosize="{minRows: 1}"
        placeholder="请输入外链"></el-input>
      <el-select
        v-model="linkValue"
        style="width: 220px"
        v-else>
        <el-option
          v-for="item in cmsList"
          :key="item.id"
          :value="item.id"
          :label="item.title"></el-option>
      </el-select>
      <div class="btn-footer">
        <el-button size='mini' type="primary" @click="saveLink">确认</el-button>
      </div>
    </div>
    <el-input
      class="link-dialog-btn"
      v-model="model.outerLink"
      type="textarea" :autosize="{minRows: 1}"
      readonly
      slot="reference"></el-input>
  </el-popover>
</div>
</template>

<script>
const separate = '$';
export default {
  name: "CMSPhotosItem",
  computed:{
    myUrl(){
      return this.model.content ? [{
        url: this.model.content,
        id: this.model.attachmentId
      }] : []
    }
  },
  props:{
    model: Object,
    cmsList: Array
  },
  created(){
    //初始化内外连
    if(this.model.outerLink){
      if(this.model.outerLink.startsWith('inner:')){
        this.isOuterInner = '0';
        this.linkValue = this.model.outerLink.split(separate).pop();
      }else{
        this.isOuterInner = '1';
        this.linkValue = this.model.outerLink;
      }
    }
  },
  data(){
    return{
      showPopover: false,
      isOuterInner: '',
      linkValue: ''
    }
  },
  methods:{
    saveLink(){
      if(this.isOuterInner === '0'){
        let obj = this.cmsList.find(item => item.id === this.linkValue);
        if(obj){
          this.model.outerLink = `inner:${obj.contentType + separate + obj.id}`;
        }else{
          this.model.outerLink = '';
        }
      }else{
        this.model.outerLink = this.linkValue;
      }
      this.showPopover = false;
    },
    updateModel({type, file, preFile}){
      switch(type){
        case 'add':{
          this.model.attachmentId = file.id;
          this.model.content = file.name;
          this.$emit('add');
          break;
        }
        case 'edit':{
          this.model.attachmentId = file.id;
          this.model.content = file.name;
          break;
        }
        case 'delete':{
          this.$emit('delete', this.model);
          break;
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.CMSPhotosItem{
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  /deep/ .link-dialog-btn{
    display: block;
    width: 148px;
    >.el-textarea__inner{
      border: none;
      border-bottom: @common-border;
      border-radius: 0;
      resize: none;
      padding: 5px;
      text-align: center;
    }
  }
}
</style>
<style lang="less">
.cms-link-dialog{
  textarea{
    min-height: 40px!important;
    resize: none;
  }
  .btn-footer{
    padding-top: 10px;
    text-align: right;
  }
}
</style>